import {Component } from 'react';
import ReactDom from 'react-dom';
export default  class Counter extends Component{
    //简写 
   /*state={
          count:0,
          name:"计算器"
      }*/
     constructor(props){
        console.log("Counter=====>constructor")
        super(props)
       //设置数据的初始化值（状态理解为数据）
         this.state={
          count:0,
          name:"计算器"  
        } 
        //console.log(this)
    } 
     //处理数据+1的事件
     handerAdd = ()=>{
         //不能直接给state赋值，而是要使用 setState()
         //this.state.count=this.state.count+1;
         //console.log(this.state.count)
         this.setState({
             count:this.state.count+1
         });
         /* this.setState({
             name:"新的计数器"
         }) */
     }
      //卸载组件
     handerUnmouted=()=>{
         //一般是清理资源的
        ReactDom.unmountComponentAtNode(document.getElementById("root"))
     }
      //强制更新
     handerFresh=()=>{
        this.forceUpdate();
     }

      //组件渲染完毕执行的方法（挂载完毕）
      //会发送ajax到后台获取数据（****）
    componentDidMount(){
        console.log("组件挂载完毕，可以请求数据componentDidMount==>")
     } 
     //组件是否已改更新
     shouldComponentUpdate(nextProps, nextState){
      /* console.log("shouldComponentUpdate==>>",this.state.count,nextState)
      return false; */
      /* if(nextState.count>5){
         return false;
      }else{
        return true;
      } */
      return true; 
     }

     //数据更新完毕以后
     componentDidUpdate(prevProps, prevState, snapshot){
        console.log("数据更新完毕，componentDidUpdate==>",prevProps,prevState,snapshot)
     }
      //组件将会被卸载是被调用
     componentWillUnmount(){
        console.log("组件将被卸载 componentWillUnmount==>")
     }

    render(){
        console.log("Counter===>>render")
        return(
            <div>
                <h1>你点击:{this.state.count}</h1>
               {/*  给按钮绑定点击事件 */}
                <button onClick={this.handerAdd}>{this.state.name}点击+1</button>
                <button onClick={this.handerUnmouted}>卸载该组件</button>
                <button onClick={this.handerFresh}>强制更新</button>
            </div>
        )
    }
   //根据props衍生出一个state的值(了解一下)
  static getDerivedStateFromProps(props, state){
      console.log("getDerivedStateFromProps==>>",props,state);
     return {count:props.num};
    }
     //可以得到快照的方法（了解一下）
    getSnapshotBeforeUpdate(prevProps, prevState){
      console.log("getSnapshotBeforeUpdate==>>",prevProps, prevState)
       return prevState;
    }
}
